<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>统计</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery3.3.1.min.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body style="overflow:Scroll;overflow-y:hidden;overflow-x:hidden;">


    <div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    function callbackFn(myChart, jsonURL) {
        $.ajax({
            url: jsonURL,
            dataType: "json",
            success: function (jsonData) {

                myChart.setOption({
                    xAxis: {
                        data: jsonData.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '数据量',
                        data: jsonData.data
                    }]
                });
                // 设置加载等待隐藏
                myChart.hideLoading();
            }
        });
    }

        // 初始化echar报表的方法
        function initReport(myChart) {

            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '数量',
                    left: 30,
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip: {},
                legend: {
                    data: ['数据量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '数据量',
                    type: 'bar',
                    data: []
                }]
            });
        }
    function createTestReport(showDivId, jsonURL) {
        var myChart = echarts.init(document.getElementById(showDivId));
        // 初始化report对象
        initReport(myChart);
        myChart.showLoading({text: '正在努力的读取数据中...'});
        // 调用后台获取json数据
        callbackFn(myChart, jsonURL);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var showDivId = 'main';
        var jsonURL = "/getstatistics";
        createTestReport(showDivId,jsonURL);
    });
</script>
</body>
</html>
